<template>
  <div class="container">
    <!--   step 1 介绍页面   -->
    <div v-if="step === 1" class="step1">
      <img class="index-bg" src="/static/shiqi/index.png" />
      <img class="btn-start" src="/static/shiqi/start.png" @click="doStart" />
    </div>
    <!--   step 2 答题页面   -->
    <div v-if="step === 2 && answer" class="step2">
<!--  由于特殊原因，这里值显示第一道题，所以这个类型的答卷，每页只能有一道题 -->
      <img class="qa-card" src="/static/shiqi/card.png" />
      <img class="speed-bg" src="/static/shiqi/speed.png" />
      <img class="subject-bg" src="/static/shiqi/subjectbackground.png" />
      <img class="btn-answer" v-if="answer && !answer.isFirstPage && !answer.isLastPage" src="/static/shiqi/btn-prev.png" @click="btnPrev" />
      <img class="btn-answer" v-if="answer && answer.isLastPage" src="/static/shiqi/btn-submit.png" />
      <!-- 文本部分 -->
      <div class="speed-txt">{{answer.currPage+'/'+answer.totalPage}}</div>
      <div class="subject-txt">{{answer.sections[0].topic}}</div>
      <!-- 题目主体部分 -->
      <!-- radio -->
      <div class="option-box radio" v-if="answer.sections[0].type === 'radio'">
        <label class="option" v-for="option in answer.sections[0].options" :key="option.key" :for="option.key">
          <input type="radio" class="ctrl-check" :name="answer.sections[0].key" @change="doSel" @click="doClick(option.key)" v-model="answer.sections[0].answer" :value="option.key" :id="option.key"/>
          <div class="cell-hd">
            <!-- image -->
            <div class="cell-item-img" v-if="option.type && option.type === 'img'" >
              <img :src="option.text"/>
              <div>{{option.placeholder}}</div>
            </div>
            <!-- editable -->
            <input class="weui-input" v-if="option.type && option.type === 'editable'" :placeholder="option.placeholder">
            <!-- normal -->
            <div class="cell-item-normal" v-if="option.type && option.type === 'normal'">{{option.text}}</div>
          </div>
        </label>
      </div>
      <!-- checkbox -->
      <div class="option-box checkbox" v-if="answer.sections[0].type === 'checkbox'">
        <label class="option" v-for="option in answer.sections[0].options">
          {{option.text}}
        </label>
      </div>
    </div>
    <!--   step 3 结果页面   -->
    <div v-if="step === 3" class="step3">
      <!-- 图形呈现部分 -->
      <img class="report-bg" src="/static/shiqi/report-bg.png" />
      <!-- 数据呈现部分 -->
      <div v-if="reportData" class="widgets">
        <div class="widget" v-for="widget in widgets" :key="widget.id">
          <div v-if="widget.code === 'null-space'" :style="{height:'calc(100vw * '+ widget.config.height+')'}"></div>
          <div v-if="widget.code === 'score-grade'" style="margin:0 auto;position: relative;" :style="{width:'calc(100vw * 0.712)',height:'calc(100vw * 0.712)' }">
            <img style="position:absolute;left:0;top:0;width:100%;height:100%;" :src="reportView.bg" />
            <div style="position:absolute;left:0;width:100%;text-align: center;color:darkorange;font-size:2.5rem;":style="{top:'calc(100vw * 0.18' }">
              {{reportView.percent}}
            </div>
            <div style="position:absolute;left:0;width:100%;text-align: center;font-size:3.5rem;" :style="{top:'calc(100vw * 0.3' }">
              {{reportView.mark}}
            </div>
            <div style="position:absolute;left:0;width:100%;text-align: center;color:darkorange;font-size:2.5rem;":style="{top:'calc(100vw * 0.45' }">
              {{reportView.grade}}
            </div>
          </div>
        </div>
        <!-- 文本 -->
        <div style="margin:0 auto;" :style="{width:'calc(100vw * 0.68)',marginTop:'calc(100vw * 0.05)' }">{{reportData.data.description}}</div>
      </div>
      <div style="position: absolute;top:calc(100vw * 1.3);left:calc(100vw * 0.2);width:calc(100vw * 0.2);z-index:3;"><img style="width: 100%;height:100%" src="/static/shiqi/qrcode.png" /></div>
<!--      <div style="position: absolute;top:calc(100vw * 1.3);left:calc(100vw * 0.4);width:calc(100vw * 0.3);z-index:3;"><img style="width: 100%;" src="/static/shiqi/start.png" @click="btnTest"/></div>-->
    </div>
    <div v-if="step === 4" class="step4">
      <img style="width:100%;top:0;left:0;position: absolute" src="/static/shiqi/solution-01.png" />
      <img style="width:calc(100vw*0.3);top:calc(100vw *0.2);left:calc(100vw*0.05);position: fixed" src="/static/shiqi/start.png" @click="restart"/>
    </div>
  </div>
</template>

<script>
  import qa from '@/serv/qaService'
  import reportServ from '@/serv/reportService'
  import sessServ from '@/serv/sessionService'
  import storageServ from '@/serv/storageService'

  // import sdk from '@/sdk/index'

  export default {
    name: "shiqi",
    data() {
      return {
        step:1,
        answer:null,
        reportData:null,
        reportView:{
          percent:null,
          mark:null,
          grade:null,
          bg:null
        },
        widgets:[]
      }
    },
    computed:{
      userSel(){
        if(this.answer)
          return this.answer.sections[0].answer
        else
          return null
      }
    },
    watch:{
      userSel(nv,ov){
        console.log('看看值的变化',nv,ov)
        // 有变化就 提交，但是没有变化的时候，click 页提交
      }
    },
    created(){
      let isFinished = storageServ.get('finished')
      console.log(isFinished)
      if(isFinished){
        // 显示 解决方案
        // alert('哈哈哈要显示解决方案')
        this.step = 4
      }else{
        qa.loadAnswer(38,serv=>{
          this.answer = serv
        })
      }
    },
    methods:{
      btnTest(){
        if(window.WeixinJSBridge){
          console.log(window.WeixinJSBridge)
          try{
            window.WeixinJSBridge.invoke('sendAppMessage',{
              "img_url":'https://shrey-public-1256580323.cos.ap-shanghai.myqcloud.com/70ca716daf224a40af60565b85bea20f.png',
              "link":'http://192.168.10.34:8080/shiqi?token'+sessServ.session.token,
              "desc":'湿气体质辨别',
              "title":'湿气体质辨别'
            },(res)=>{
              alert(JSON.stringify(res))
            })
          }catch (e) {
            alert(e)
          }
        }else{
          alert('不支持!')
        }
      },
      restart(){
        // 删除 isFinished
        storageServ.remove('finished')
        qa.loadAnswer(38,serv=>{
          this.answer = serv
          this.step = 2 // 开始答题的页面
        })
      },
      doStart(){
        this.step = 2// 直接计入答题环节
      },
      doClick(answer){
        if(this.answer){
          if(this.answer.sections[0].answer === answer){
            console.log('----执行相同大胆的操作----')
            if(this.answer.isLastPage){
              let that = this
              this.answer.saveCurrPage((res)=>{
                this.answer.submit((res)=>{
                  // 先提示下
                  that.showReport(res)
                })// 提交
              })
            }else
              this.answer.nextPage()
          }
        }
      },
      doSel(){
        if(this.answer.sections[0].answer){
          console.log('----执行不相同答案的操作----')
          if(this.answer.isLastPage){
            let that = this
            this.answer.saveCurrPage((res)=>{
              this.answer.submit((res)=>{
                console.log('看报告ID在哪里',res)
                // 先提示下
                that.showReport(res)
              })// 提交
            })
          }else
            this.answer.nextPage()
        }
      },
      btnPrev(){
        if(this.answer)
          this.answer.prevPage()
      },
      showReport(answer){
        let that = this
        // 加载报告数据
        if(answer.data.reportDataId){
          reportServ.load(answer.data.reportDataId,res=>{
            console.log('---报告数据---',res)
            that.reportData = res
            // 计算一些数据
            // 挂件数据
            let tdPages = JSON.parse(res.templateData)
            that.widgets = tdPages[0].widgets
            that.reportView.percent='湿气指数为'+parseInt(res.data.percentNum * 100)+'%'
            that.reportView.mark = res.data.mark
            that.reportView.grade = '处于'+res.data.grade
            if(res.data.percentNum<=0.15)
              that.reportView.bg = '/static/shiqi/15.png'
            else if(res.data.percentNum>0.15 && res.data.percentNum<=0.3)
              that.reportView.bg = '/static/shiqi/30.png'
            else if(res.data.percentNum>0.3 && res.data.percentNum<=0.45)
              that.reportView.bg = '/static/shiqi/45.png'
            else if(res.data.percentNum>0.45 && res.data.percentNum<=0.65)
              that.reportView.bg = '/static/shiqi/50.png'
            else if(res.data.percentNum>0.65 && res.data.percentNum<=0.75)
              that.reportView.bg = '/static/shiqi/65.png'
            else if(res.data.percentNum>0.75 && res.data.percentNum<=0.9)
              that.reportView.bg = '/static/shiqi/75.png'
            else if(res.data.percentNum>0.9)
              that.reportView.bg = '/static/shiqi/90.png'
          })
          this.step = 3 // 这就显示 报告了...
          // 保存 报告加载完成的信息
          storageServ.save('finished',true)
        }else
          alert('没有结果啊呀！不可能！')
      }
    }
  }
</script>

<style scoped>
  .container{
    margin:0;
    padding:0;
    width:100%;
    height:100vh;
    background-color: #f9f2e0;
    font-size: 2rem;
  }
  .step1 , .step2 , .step3{
    position: relative;
  }
  .step1 .index-bg{
    position: absolute;
    left: 0;
    top:0;
    width:100%;
    z-index:1;
  }
  .step1 .btn-start{
    position: absolute;
    left: 20%;
    top:calc(100vw * 1.4);
    width:calc(100vw * 0.6);
    z-index:2;
    cursor: pointer;
  }
/*  step 2 */
  .step2 .qa-card{
    position: absolute;
    left:calc(100vw * 0.04);
    top:calc(100vw *0.07);
    width:94%;
    z-index: 1;
  }
  .step2 .speed-bg{
    position: absolute;
    left:calc(100vw * 0.12);
    top:calc(100vw *0.026);
    width:19.5%;
    z-index: 2;
  }
  .step2 .speed-txt{
    position: absolute;
    left:calc(100vw * 0.15);
    top:calc(100vw *0.08);
    width:19.5%;
    z-index: 3;
    font-size: 2.5rem;
  }
  .step2 .btn-answer{
    position: absolute;
    left:calc(100vw * 0.26);
    top:calc(100vw *1.45);
    width:50%;
    z-index: 2;
  }
  .step2 .subject-bg{
    position: absolute;
    left:calc(100vw * 0.016);
    top:calc(100vw *0.258);
    width:90%;
    z-index: 2;
  }
  .step2 .subject-txt{
    position: absolute;
    left:calc(100vw * 0.14);
    top:calc(100vw *0.35);
    width:74%;
    z-index: 3;
  }
  .step2 .option-box{
    position: absolute;
    left:calc(100vw * 0.12);
    top:calc(100vw * 0.56);
    /*border:1px solid #0d0d0d;*/
    width:78%;
    z-index: 3;
  }
  .step2 .option-box .option{
    display: block;
    margin: calc(100vw * 0.01) calc(100vw * 0.03);
    text-align: center;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
  }
  .step2 .option-box .option:active{
    background-color:#ECECEC;
  }
  .step2 .option-box .option .ctrl-check{
    position: absolute;
    left:-9999rem;
  }
  .step2 .option-box .option .cell-hd{
    line-height:4rem;
    /*border:1px solid #999;*/
  }
  /* normal */
  .step2 .option-box .option .ctrl-check + .cell-hd .cell-item-normal{
    background-color: #f9f2e0;
    border:1px dashed #a3a3a3;
    margin: calc(100vw * 0.06) 0;/* 撑大 */
  }
  .step2 .option-box .option .ctrl-check:checked + .cell-hd .cell-item-normal{
    background-color: darkorange;
    border:1px solid #a3a3a3;
  }
  /* image*/
  .step2 .option-box .option .ctrl-check + .cell-hd .cell-item-img{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .step2 .option-box .option .ctrl-check + .cell-hd .cell-item-img img{
    max-width: calc(100vw * 0.3);
    max-height:calc(100vw * 0.3);
  }
  .step2 .option-box .option .ctrl-check + .cell-hd .cell-item-img div{
    background-color: #f9f2e0;
    border:1px dashed #a3a3a3;
    min-width: calc(100vw * 0.3);
  }
  .step2 .option-box .option .ctrl-check:checked + .cell-hd .cell-item-img img{
    border:1px solid #a3a3a3;
  }
  .step2 .option-box .option .ctrl-check:checked + .cell-hd .cell-item-img div{
    background-color: darkorange;
    border:1px solid #a3a3a3;
  }
  /* step3*/
  .step3 .report-bg{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    z-index: 1;
  }
  .step3 .widgets{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    z-index: 2;
  }
</style>
